<template>
  <div class="action-panel">
    <div :class="['iconfont','icon-like-solid',videoInfo.likeCountActive?'active':'']"
         @click="userAction('VIDEO_LIKE')"
    ></div>
    <div :class="['iconfont','icon-toubi',videoInfo.likeCounta?'active':'']"
         @click="userAction('VIDEO_COIN')"
    ></div>
    <div :class="['iconfont','icon-collection-solid',videoInfo.coinCountActive?'active':'']"
         @click="userAction('VIDEO_COLLECTION')"
    ></div>
  </div>
</template>
<script setup>
import {getCurrentInstance, inject, nextTick, onMounted, onUnmounted, provide, ref, watch} from "vue";
import {useRoute, useRouter} from "vue-router";
import {mitter} from "@/eventbus/eventBus.js";
import {useLoginStore} from "@/stores/loginStore.js";
import {ElMessage} from "element-plus";

const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const loginStore = useLoginStore();
const videoInfo = inject('videoInfo');
const userAction = (type)=>{
  if(loginStore.token == '' || loginStore.token == null){
    loginStore.setLogin(true);
  }
  ElMessage.error('暂未开放此功能!');
}
</script>
<style scoped lang="scss">
.action-panel{
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e3e5e7;
  padding: 20px 0;
  .iconfont{
    cursor: pointer;
    color: #61666d;
    display: flex;
    align-items: center;
    margin-right: 40px;
    &:before{
      margin-right: 10px;
      font-size: 35px;
    }
    &:hover{
      color: #409EFF;
    }
  }
  .active{
    color: #409EFF;
  }
}
</style>